<template>
  <div class="app-container">
    <SearchForm
      v-show="showSearch"
      v-model="queryParams"
      :options="options.formOps"
      @onQuery="getList"
    >
      <template #operationTime="{ filterForm }">
        <el-form-item label="投用时间">
          <el-date-picker
            v-model="filterForm.time"
            type="daterange"
            range-separator="-"
            style="width: 100%"
            @change="operationTimeChange"
            format="MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </template>
    </SearchForm>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['inspection:project:create']"
          >新增</el-button
        >
      </el-col>

      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <Table
      ref="table"
      :auto-featch="true"
      :fetch-data="fetchData"
      :options="options.table"
    >
      <template #actionButton="{ row }">
        <el-button
          type="text"
          icon="Edit"
          @click="handleEdit(row)"
          v-hasPermi="['inspection:project:update']"
          >修改</el-button
        >

        <el-button
          type="text"
          icon="Delete"
          style="color: red"
          @click="handleDel(row)"
          v-hasPermi="['inspection:project:update']"
          >删除</el-button
        >
      </template></Table
    >
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import { apis as APIS } from "@/api/znxj/jcxm.js";
import formJson from "./components/options.json";
import { useAsyncData, useFormJsonNew } from "@/views/hooks/useAsyncData.js";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();

const ops = useFormJsonNew(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["projectCode", "routeName", "chargePeople"].includes(i.prop)
  ),
});
const showSearch = ref(true);
const table = ref();

const handleAdd = () => {
  router.push("/znxj/input");
};
const handleEdit = (row) => {
  router.push({
    path: "/znxj/input",
    query: {
      row: JSON.stringify(row),
    },
  });
};
const { fetchData, getList, handleDel, queryParams } = useAsyncData({
  APIS,
  formJson,
  table,
  proxy,
});
onMounted(() => {});
</script>

<style lang="scss" scoped></style>
